<template>
  <qf-card
    className="role"
    title="角色列表"
    btnTitle="创建"
    btnUrl="/role/create"
  >
    <!-- 表格  -->
    <qf-table :tableData="tableData" :columns="columns"></qf-table>
    <!-- 表格  -->

    <!-- 页面组件 -->
    <editRole ref="editRoleRef" :handleTableData="handleTableData" />
    <assignAuth ref="assignAuthRef" :handleTableData="handleTableData" />
    <!-- 页面组件 -->
  </qf-card>
</template>

<script>
import { getRoleApi, deleteRoleApi } from "@/api/role";
// import tableData from "~mock/roles/index.js";
// console.log("mock数据：", tableData);
// console.log("mock数据：", tableData);
// console.log("mock数据：", tableData);
// console.log("mock数据：", tableData);

export default {
  components: {
    editRole: () => import("./components/editRole.vue"),
    assignAuth: () => import("./components/assignAuth.vue"),
  },
  methods: {
    async handleTableData() {
      const res = await getRoleApi();
      this.tableData = res.data;
    },
  },
  created() {
    this.handleTableData();
  },
  data() {
    return {
      // tableData: tableData.data,
      tableData: [],
      columns: [
        { title: "编号", field: "role_id" },
        { title: "角色名称", field: "role_name" },
        { title: "角色描述", field: "role_describe" },
        {
          title: "操作",
          width: 280,
          fixed: "right",
          type: "btn",
          payload: [
            {
              name: "分配权限",
              type: "primary",
              click: (row) => {
                console.log("分配权限", row);
                this.$refs.assignAuthRef.status = true;
                this.$refs.assignAuthRef.row = row;
              },
            },
            {
              icon: "el-icon-edit",
              type: "success",
              click: (row) => {
                console.log("编辑角色", row);
                this.$refs.editRoleRef.status = true;
                this.$refs.editRoleRef.row = row;
              },
            },
            {
              icon: "el-icon-delete",
              type: "danger",
              click: (row) => {
                this.confirm(async () => {
                  // console.log("删除", row);
                  // const res = await deleteUserApi({user_id: row.user_id})
                  const res = await deleteRoleApi(row);
                  if (res.meta.state === 200) {
                    this.$message.success(res.meta.msg);
                    this.handleTableData();
                  } else {
                    this.$message.error(res.meta.msg);
                  }
                });
              },
            },
          ],
        },
      ],
      // ...
    };
  },
};
</script>

<style></style>
